<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]">
        <!-- 顶部信息 -->
        <div class="detail-content-top mb-[44px]">
          <a-row :gutter="20">
            <a-col :span="8">
              <div class="detail-content-top-item">
                <div class="detail-top-title">
                  <div class="icon">
                    <icon-user />
                  </div>
                  <div class="text">质量评分得分</div>
                </div>
                <div class="detail-top-info">1分</div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="detail-content-top-item">
                <div class="detail-top-title">
                  <div class="icon">
                    <icon-user />
                  </div>
                  <div class="text">应用评价</div>
                </div>
                <div class="detail-top-info">有评价</div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="detail-content-top-item">
                <div class="detail-top-title">
                  <div class="icon">
                    <icon-user />
                  </div>
                  <div class="text">成本评价</div>
                </div>
                <div class="detail-top-info">有评价</div>
              </div>
            </a-col>
          </a-row>
        </div>
        <!-- tab -->
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="评价报告">
            <ComplianceReporting />
          </a-tab-pane>
          <a-tab-pane key="2" title="关联资产">
            <RelatedAssets />
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </PageMain>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import ComplianceReporting from './compliance_reporting.vue';
import RelatedAssets from './related_assets.vue';
const route = useRoute();

const currentId = ref(route.query.id);

console.log(currentId);
</script>

<style lang="less" scope>
.arco-tabs-nav-type-line .arco-tabs-tab {
  margin: 0 20px 0 0;
}

.arco-tabs-content {
  padding: 0;
}

.detail-content-top-item {
  background: #F7F9FC;
  border-radius: 8px;
  padding: 10px 12px;

  .detail-top-title {
    display: flex;
    align-items: center;

    .icon {
      width: 24px;
      height: 24px;
      background: #465a801a;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #465A80;
      margin-right: 10px;
    }

    .text {
      color: #465A80;
    }
  }

  .detail-top-info {
    color: #465A80;
    font-weight: 700;
    font-size: 16px;
    padding-left: 33px;
  }
}
</style>